<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-yellow">
				<block slot="content">
					<p style="font-weight: 600;">交个朋友</p>
				</block>
			</cu-custom>
			<!-- 工具 -->
			<view>
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-red "></text> 社牛工具箱
					</view>
				</view>
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList1" :key="index" @click="play(item)">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<!-- 其他 -->
			<view class="home-bottom">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-blue "></text> 便捷工具
					</view>
				</view>
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList2" :key="index" @click="play(item)">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cuIconList1: [{
					cuIcon: 'medalfill',
					color: 'yellow',
					badge: 120,
					name: '麻酱计分',
					router:'/pages/games/mahjong/index'
				}, {
					cuIcon: 'github',
					color: 'black',
					badge: 1,
					name: '狼人杀',
					router:null
				}, {
					cuIcon: 'emojiflashfill',
					color: 'red',
					badge: 0,
					name: '血染钟楼',
					router:null
				}, {
					cuIcon: 'hotfill',
					color: 'brown',
					badge: 22,
					name: '剧本杀',
					router:null
				}, {
					cuIcon: 'upstagefill',
					color: 'pink',
					badge: 0,
					name: '酒局',
					router:null
				}, {
					cuIcon: 'activityfill',
					color: 'blue',
					badge: 0,
					name: 'City Walk',
					router:null
				}],
				cuIconList2: [{
					cuIcon: 'discoverfill',
					color: 'olive',
					badge: 0,
					name: '朋友圈',
					router:null
				}, {
					cuIcon: 'choicenessfill',
					color: 'gray',
					badge: 0,
					name: '桌游',
					router:null
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助',
					router:null
				}, {
					cuIcon: 'notificationforbidfill',
					color: 'purple',
					badge: 0,
					name: '意见反馈',
					router:null
				}],
				modalName: null,
				gridCol: 3,
				gridBorder: true,
			}
		},
		methods: {
			// 进入游戏
			play(item){
				if(item.router==null){
					uni.showToast({
						title: '敬请期待！',
						icon: 'none',
					});
				}
				else{
					// 跳转
					uni.navigateTo({
						url:item.router
					})
				}
			}
		}
	}
</script>

<style>
	.home-bottom {
		padding-bottom: 140rpx;
	}
</style>